<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--视口参数设置-->
    <meta name="viewport" content="width=device-width, user-scalable=no,
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>乐淘项目-移动端-个人中心</title>
    <!--专门用来开发移动端==》类似bs库-->
    <link rel="stylesheet" href="./lib/mui/css/mui.min.css">
    <!--字体图标-->
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/search.css">
</head>
<body>
<!--全部内容-->
<div class="lt-layout">

    <!--头部-->
    <div class="lt-header">

        <a href="javascript:history.go(-1);" class="home"><i class="fa fa-arrow-left"></i></a>
        <p>搜索中心</p>
        <a href="" class="home"><i class=""></i></a>

    </div>

    <!--主体-->
    <div class="lt-main">

        <!-- 区域滚动 -->
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">

                <!--搜索头部-->
                <div class="swarch-head">
                    <input type="text" class="search-txt" placeholder="请输入关键字小兄弟">
                    <button class="earch-btn mui-btn-primary search-btn">搜索</button>
                </div>

                <!--搜索主体-->
                <div class="search-con">
                    <!--全部模板生成-->
                </div>

            </div>
        </div>

    </div>

    <!--底部-->
    <div class="lt-footer">

        <ul>
            <li>
                <a href="index.html">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="category.html">
                    <i class="fa fa-align-justify"></i>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="cart.html" class="logout-1">
                    <i class="fa fa-cart-plus"></i>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="user.html" class="logout-2">
                    <i class="fa fa-user"></i>
                    <p>用户中心</p>
                </a>
            </li>
        </ul>

    </div>

</div>

<!--创建模板-->
<script type="text/html" id="tmp">
    {{ if list.length == 0 }}
    <p>没有更多数数据啦，小老弟!!!</p>
    {{ else }}
    <div class="option mui-clearfix">
        <a href="#" class="mui-pull-left">搜索历史</a>
        <a href="#" class="mui-pull-right history-cle"> <i class="fa fa-trash"></i> 清空历史</a>
    </div>

    <!--下面的列表-->
    <ul class="history-list">
        {{ each list v i }}
        <li class="mui-clearfix">
            <a href="javascript:;" class="mui-pull-left">{{ v }}</a>
            <a href="javascript:;" class="xx"><span class="mui-pull-right history-del" data-index={{ i }}>×</span></a>
        </li>
        {{ /each }}
    </ul>
    {{ /if }}
</script>

<!--专门用来开发移动端==》类似jq库-->
<script src="./lib/zepto/zepto.min.js"></script>
<!--专门用来开发移动端==》类似bs库-->
<script src="./lib/mui/js/mui.js"></script>
<script src="./lib/artTemplate/template-web.js"></script>
<script src="./js/common.js"></script>
<script src="./js/search.js"></script>
</body>
</html>